<!DOCTYPE html>
<html xmlns:th="www.thymeleaf.org">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">

<meta content="旧书,二手书,二手教材,旧教材,校园书籍,校园旧书，旧书网" name="keywords">
<meta content="买卖二手书，就上旧书街" name="description">
<meta content="zh" name="language">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<link href="res/form.css" rel="stylesheet" type="text/css">
<link href="res/pager.css" rel="stylesheet" type="text/css">
<link href="res/ubm_basic.css" rel="stylesheet" type="text/css">
<link href="http://cdnfile.jiushujie.com/images/ubm.ico"
	rel="shortcut icon" type="image/x-icon">

<title>买卖二手书,就上旧书街</title>
</head>
<body>
<div th:replace="index::div#header"></div>
	<div class="main_middle" id="cart">
		<div class="center_980" id="main_content">
			<style type="text/css">
div.grid-view th {
	border-bottom: 1px !important;
	background-color: rgb(248, 248, 248) !important;
}
</style>
			<script src="/themes/classic/assets/js/cart.js?ver=1"
				type="text/javascript"></script>
			<div class="border_white padding_10" style="margin-bottom: 10px;">
				<div class="cart_order_title">我的购物车</div>
				<div style="float: right;">
					<ul class="cart_step">
						<li class="now">1. 我的购物车 &gt;&gt;&gt;</li>
						<li>2. 填写订单 &gt;&gt;&gt;</li>
						<li>3. 完成订单</li>
					</ul>
				</div>
				<div class="clearfloat"></div>
			</div>
			<div class="border_white">
				<div class="grid-view" id="gridview-list-grid">
					<table class="items">
						<thead>
							<tr style="background-color: rgb(255, 255, 255);">
								<th id="gridview-list-grid_c0">&nbsp;</th>
								<th class="checkbox-column" ><input :checked="carts.length===allSelectedCarts.length&&carts.length" @click="selectAll()" type="checkbox"></th>
								<th id="gridview-list-grid_c2">&nbsp;</th>
								<th id="gridview-list-grid_c3">书名</th>
								<th id="gridview-list-grid_c4">卖家</th>
								<th id="gridview-list-grid_c5">原价</th>
								<th id="gridview-list-grid_c6">库存量</th>
								<th id="gridview-list-grid_c7">售价</th>
								<th id="gridview-list-grid_c8">购买数量</th>
								<th id="gridview-list-grid_c9">小计</th>
								<th id="gridview-list-grid_c10">操作</th>
							</tr>
						</thead>
						<tbody v-for="(v,k) in carts">
							<tr class="odd" style="background-color: rgb(255, 255, 255);">
								<td style="width: 10px;">&nbsp;</td>
								<td class="book_id_checkbox" style="width: 30px;"><input
									:checked="allSelectedCarts.indexOf(v.id)>=0" @click="selectSingle(k)"
									id="gridview-list-grid_c1_0"
									name="gridview-list-grid_c1[]" type="checkbox"
									value="395428212"></td>
								<td style="width: 40px;"><a :href="'book_'+v.id" :title="v.name"
															target="_blank"><img :src="v.pic"
										class="cart_pic"></a></td>
								<td><a :href="'book_'+v.id" :title="v.name"
									   target="_blank">{{v.name}}</a></td>
								<td><a href="#" target="_blank"
									title="rAy1835">{{v.user.name}}</a></td>
								<td style="width: 70px;">￥{{v.markPrice}}</td>
								<td class="kucun_count" style="width: 70px;">999</td>
								<td style="width: 70px;">￥{{v.price}}</td>
								<td style="width: 120px;">
									<button @click="changeNum(k,v.count,-1)" style="width:25px;text-align: center" type="button">
										-
									</button>
									<input style="width:25px;text-align: center" type="text" v-model="v.count">
									<button @click="changeNum(k,v.count,1)" style="width:25px;text-align: center" type="button">
										+
									</button>
								</td>
								<td style="width: 70px;"><span id="single_total_395428212">￥{{v.price * v.count}}</span></td>
								<td style="width: 70px;"><a @click="del(k)"
									class="delete_cart_item"
									 id="delete_link_395428212">删除</a></td>
							</tr>

						</tbody>
					</table>
					<div class="keys" style="display: none" title="/cart/index">
						<span>395428212</span><span>395387881</span>
					</div>
				</div>
				<form action="/order/index" id="create_order_form" method="post">
					<input name="YII_CSRF_TOKEN"
						type="hidden"
						value="WVYyTmFaMWVQNVJ1TEVidUVkWVlNX1NmQkhHeEdOVELE7fX9-n0E8jpko_IBDVLHLuB16bjlss8QkWAILe6_9g==">
					<div style="background-color: rgb(248, 248, 248); padding: 10px;">
						<div style="float: left;">
							<input @click="delSelect()" class="button_user_action"
								   style="padding: 1px 3px;" type="button"
								value="删除选中">
						</div>
						<div style="float: right;">
							<span class="total_span" style="display: inline;"> <span
								class="selected_count">2</span>本图书&nbsp;&nbsp;总计(不含运费) : <span
								class="selected_price">￥{{totalPrice}}</span>
							</span> <input id="book_ids" name="book_ids" type="hidden" value="">
							<!--            <a href="/site/app" class="button_link">使用旧书街APP进行结算</a>-->
							<input @click="tijiao" class="button" id="submit_button"
								type="button" value="去结算>">
						</div>
						<div class="clearfloat"></div>
					</div>
				</form>
			</div>


		</div>
	</div>
<script>
	var  cv=new Vue({
		el:"#cart",
		data:{
			carts:[],
			allChecked: true,
			//存放被选择的数据
			allSelectedCarts: [],


		},
		created(){

			axios.get("jsj-user/jiushujie/jsjUser/cart").then(res=>{
				this.carts=res.data.data;
			});


		},
		methods: {

			tijiao(){
				sessionStorage.setItem('cartid',JSON.stringify(this.allSelectedCarts));
				console.log(JSON.parse(sessionStorage.getItem('cartid')));
				location.href="/order-pay.htm";
			},
			//删除购物车元素
			//删除是一定也要记得从allSelectGoods数组中删除对应的id
			del(k) {
				if (!confirm("确认删除吗")) {
					window.event.returnValue = false;
				}
				else {
					//如果该条信息已被选中
					if(this.allSelectedCarts.indexOf(this.carts[k].id)!==-1){
						var index = this.allSelectedCarts.indexOf(this.carts[k].id);
						this.allSelectedCarts.splice(index,1);
					}
					this.carts.splice(k, 1);
					console.log(this.allSelectedCarts)
				}
			},
			//增减数量
			changeNum(k, count, type) {
				//如果是减少，要判断>1，最少是1
				if (type === -1) {
					if (this.carts[k].count > 1) {
						this.carts[k].count = this.carts[k].count+ type;
					}
				}
				else {
					this.carts[k].count = this.carts[k].count + type;
				}
				axios.get("jsj-order/jiushujie/jsjCart/changeNum",{params:{count:this.carts[k].count,bid:this.carts[k].id,uid:t.user.id}}).then(res=>{



				})
			},
			//点击全选按钮
			selectAll() {
				//event.currentTarget.checked表示点击完后该选择框的状态
				if (!event.currentTarget.checked) {
					this.allSelectedCarts = [];
				} else {

					this.allSelectedCarts = [];//先置空，然后再重新添加，不然数组里会有重复！因为有可能点击全选之前已经选择了几个单选按钮。也就是数组里已经添加过了对应的id。
					this.carts.forEach((v, k) => {
						this.allSelectedCarts.push(v.id)
					})
				}
				console.log(this.allSelectedCarts)
			},
			//点击单选按钮
			selectSingle(k) {
				if (event.currentTarget.checked) {
					this.allSelectedCarts.push(this.carts[k].id)
				} else {
					for (var i = 0; i < this.allSelectedCarts.length; i++) {
						if (this.carts[k].id === this.allSelectedCarts[i]) {
							this.allSelectedCarts.splice(i, 1);
							this.allChecked = false;
							break;
						}
					}
				}
				console.log(this.allSelectedCarts)
			},
			//批量删除
			delSelect() {
				if (confirm("确认删除" + this.allSelectedCarts.length + "条信息吗？")) {
					for(var i=this.carts.length-1;i>=0;i--){
						if (this.allSelectedCarts.indexOf(this.carts[i].id)!==-1) {
							//从allSelectedGoods数组中也需要删除
							var index = this.allSelectedCarts.indexOf(this.carts[i].id);
							this.allSelectedCarts.splice(index,1);
							//删除goods数组中的信息
							/*var index = this.carts.indexOf(v.id);*/
							this.carts.splice(i,1);
						}
					}
					//这种写法是错误的，因为数组每次删除一条数据以后索引值会发生变化，所以用上述的倒叙删除，先删除索引大的数据
					/* this.carts.forEach((v, k) => {
                         if (this.allSelectedCarts.indexOf(v.id)!==-1) {
                         //从allSelectedGoods数组中也需要删除
                             var index = this.allSelectedCarts.indexOf(this.carts[k].id);
                             this.allSelectedCarts.splice(index,1);
                         //删除goods数组中的信息
                            /!*var index = this.carts.indexOf(v.id);*!/
                            console.log(k);
                             this.carts.splice(k,1);
                         }
                     });*/
				}
				console.log(this.allSelectedCarts)
			}
		},

		computed:{
			totalPrice(){
				var  totalprice=0;
				this.carts.forEach((v,k) => {

					if (this.allSelectedCarts.indexOf(v.id)!== -1) {
						totalprice += v.count *v.price;
					}
				});
				return totalprice;
			}
		}

	})
</script>

	<div style="border-bottom: 1px solid rgb(255, 255, 255);"></div>
	<div style="position: fixed; top: 122px; right: 20px;">
		<img src="res/ios_download.jpg"
			style="width: 120px; margin-bottom: 10px;"><br> <img
			src="res/android_download.jpg"
			style="width: 120px; margin-bottom: 10px;">
	</div>
	<div class="clearfloat"></div>
<div th:replace="index::div.bottom"></div>
	<h1 class="jiushujie_slogan">买卖二手书，就上旧书街。旧书街二手书交易网-您身边的旧书网站</h1>
</body>
</html>